<template>
	<div class="user-read-wrap">
		<header-view1 :headTitle="headTitle"></header-view1>
		<ul class="user-read-list">
			<li v-for="userData in userData">
				<a :href="userData.url">
					<img :src="userData.logo"/>
					<p class="ellips">[{{ userData.type }}]{{ userData.title }}</p>
					<i></i>
				</a>
			</li>
		</ul>
		<footer-view></footer-view>
	</div>
</template>

<script>
	export default{
		name:'userRead',
		data(){
			return{
				headTitle:'我关注的',
				userData:{}
			}
		},
		created(){
			this.getData();
		},
		methods:{
			getData(){
				this.$get('/api/subscribeList',{token:localStorage.getItem('token')}).then(res=>{
					if (res.code == 0) {
						this.userData = res.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.user-read-list{
		margin: 20px 0;
		padding: 0 22px;
		background-color: #fff;
	}
	.user-read-list li{
		height: 62px;
		border-bottom: 1px solid #e5e6f0;
		background-color: #fff;
	}
	.user-read-list li:last-child{
		border-bottom: none;
	}
	.user-read-list li a{
		position: relative;
		display: block;
		width: 100%;
		line-height: 62px;
	}
	.user-read-list li img{
		float: left;
		width: 62px;
		height: 42px;
		margin-top: 12px;
		margin-right: 6px;
		border-radius: 3px;
	}
	.user-read-list li p{
		font-size: 14px;
		color: #333;
		margin-right: 20px;
	}
	.user-read-list a i {
    width: 20px;
    height: 20px;
    top: 6px;
    right: 0;
    position: absolute;
	}
	.user-read-list a i:before {
    position: absolute;
    top: 21px;
    right: auto;
    bottom: auto;
    left: 1px;
    z-index: 10;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	}
</style>